<script setup lang="ts">
import type { TooltipPlacement } from 'ant-design-vue/es/tooltip/abstractTooltipProps';

defineOptions({
  inheritAttrs: false,
});
const props = defineProps<{
  placement?: TooltipPlacement;
  overlayClassName?: string;
}>();
</script>

<template>
  <ATooltip
    :trigger="['click', 'focus', 'hover']"
    :placement="props.placement"
    :align="{ offset: [0, 6] }"
    :overlayClassName="props.overlayClassName"
    arrowPointAtCenter
  >
    <template #title>
      <slot />
    </template>
    <template #default>
      <span v-bind="$attrs" class="relative before:(absolute content-[''] -inset-1)">
        <slot name="icon">
          <i class="i-ri:question-line cursor-help align-middle text-[1.2em] text-inherit" />
        </slot>
      </span>
    </template>
  </ATooltip>
</template>
<!-- i-ri:question-line  i-bi:question-circle -->
